/*      宣告按鈕   button          */

/*      白色       btn_white       */
/*      藍色       btn_blue        */
/*      綠色       btn_green       */
/*      初音綠     btn_miku        */
/*      黃色       btn_yellow      */
/*      紅色       btn_red         */
/*      紫色       btn_purple      */
/*      鐵灰色     btn_iron        */
/*      桃紫色     btn_peach       */
/*      橘色       btn_orange      */
/*      粉紅色     btn_pink        */

/* 範例： <button type="button" class="button btn_white btn_s">按鈕</button> */

.button {
    cursor: pointer;
    font-size: 16px;
    padding: 3px 8px;
    /*border-radius: 3px;*/
    outline: none;
}

.btn_s {
    font-size: 12px;
    padding: 3px 8px;
    /*border-radius: 5px;*/
}

.btn_lg {
    font-size: 20px;
    padding: 5px 12px;
    /*border-radius: 5px;*/
}

/*白色 btn_white*/
.btn_white {
    color: #000;
    border: 1px solid #bbb;
    border-bottom: 2px solid #bbb;
    background-color: #f9f9f9;
    box-shadow: #fff 0 1px 1px 0 inset;
}

    .btn_white:hover {
        border: 1px solid #999;
        border-bottom: 2px solid #999;
        background-color: #f1f1f1;
    }

    .btn_white:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #999;
        border-bottom: 1px solid #999;
        box-shadow: #fff 0 0 0 0 inset;
    }


/*藍色 btn_blue*/
.btn_blue {
    color: #fff;
    border: 1px solid #004985;
    border-bottom: 2px solid #004985;
    background-color: #005da8;
    box-shadow: #648cc3 0 1px 1px 0 inset;
}

    .btn_blue:hover {
        border: 1px solid #002f5c;
        border-bottom: 2px solid #002f5c;
        background-color: #005397;
    }

    .btn_blue:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #002f5c;
        border-bottom: 1px solid #002f5c;
        box-shadow: #fff 0 0 0 0 inset;
    }


/*綠色 btn_green*/
.btn_green {
    color: #fff;
    border: 1px solid #00733b;
    border-bottom: 2px solid #00733b;
    background-color: #009149;
    box-shadow: #71bc8b 0 1px 1px 0 inset;
}

    .btn_green:hover {
        border: 1px solid #005029;
        border-bottom: 2px solid #005029;
        background-color: #008242;
    }

    .btn_green:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #005029;
        border-bottom: 1px solid #005029;
        box-shadow: #fff 0 0 0 0 inset;
    }

/*初音綠 btn_miku*/
.btn_miku {
    color: #fff;
    border: 1px solid #00787f;
    border-bottom: 2px solid #00787f;
    background-color: #0098a1;
    box-shadow: #68c1c3 0 1px 1px 0 inset;
}

    .btn_miku:hover {
        border: 1px solid #005358;
        border-bottom: 2px solid #005358;
        background-color: #008990;
    }

    .btn_miku:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #005358;
        border-bottom: 1px solid #005358;
        box-shadow: #fff 0 0 0 0 inset;
    }

/*黃色 btn_yellow*/
.btn_yellow {
    color: #fff;
    border: 1px solid #be8300;
    border-bottom: 2px solid #be8300;
    background-color: #f6a800;
    box-shadow: #fbc976 0 1px 1px 0 inset;
}

    .btn_yellow:hover {
        border: 1px solid #825a03;
        border-bottom: 2px solid #825a03;
        background-color: #da9600;
    }

    .btn_yellow:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #825a03;
        border-bottom: 1px solid #825a03;
        box-shadow: #fff 0 0 0 0 inset;
    }

/*紅色 btn_red*/
.btn_red {
    color: #fff;
    border: 1px solid #b12c29;
    border-bottom: 2px solid #b12c29;
    background-color: #e53534;
    box-shadow: #f08f74 0 1px 1px 0 inset;
}

    .btn_red:hover {
        border: 1px solid #7a1f1c;
        border-bottom: 2px solid #7a1f1c;
        background-color: #cb302f;
    }

    .btn_red:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #7a1f1c;
        border-bottom: 1px solid #7a1f1c;
        box-shadow: #fff 0 0 0 0 inset;
    }

/*紫色 btn_purple*/
.btn_purple {
    color: #fff;
    border: 1px solid #471c6b;
    border-bottom: 2px solid #471c6b;
    background-color: #572381;
    box-shadow: #8767a6 0 1px 1px 0 inset;
}

    .btn_purple:hover {
        border: 1px solid #300b48;
        border-bottom: 2px solid #300b48;
        background-color: #4e1f75;
    }

    .btn_purple:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #300b48;
        border-bottom: 1px solid #300b48;
        box-shadow: #fff 0 0 0 0 inset;
    }

/*鐵灰色 btn_iron*/
.btn_iron {
    color: #fff;
    border: 1px solid #1f1f1f;
    border-bottom: 2px solid #1f1f1f;
    background-color: #3e3e3e;
    box-shadow: #555 0 1px 1px 0 inset;
}

    .btn_iron:hover {
        border: 1px solid #000;
        border-bottom: 2px solid #000;
        background-color: #333;
    }

    .btn_iron:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #000;
        border-bottom: 1px solid #000;
        box-shadow: #fff 0 0 0 0 inset;
    }

/*桃紅色 btn_peach*/
.btn_peach {
    color: #fff;
    border: 1px solid #870267;
    border-bottom: 2px solid #870267;
    background-color: #a5027c;
    box-shadow: #c37eaf 0 1px 1px 0 inset;
}

    .btn_peach:hover {
        border: 1px solid #5b0044;
        border-bottom: 2px solid #5b0044;
        background-color: #930270;
    }

    .btn_peach:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #5b0044;
        border-bottom: 1px solid #5b0044;
        box-shadow: #fff 0 0 0 0 inset;
    }

/*橘色 btn_orange*/
.btn_orange {
    color: #fff;
    border: 1px solid #b65b0c;
    border-bottom: 2px solid #b65b0c;
    background-color: #ec7405;
    box-shadow: #f6ad6e 0 1px 1px 0 inset;
}

    .btn_orange:hover {
        border: 1px solid #7e450a;
        border-bottom: 2px solid #7e450a;
        background-color: #d26809;
    }

    .btn_orange:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #7e450a;
        border-bottom: 1px solid #7e450a;
        box-shadow: #fff 0 0 0 0 inset;
    }

/*粉紅色 btn_pink*/
.btn_pink {
    color: #fff;
    border: 1px solid #ec776b;
    border-bottom: 2px solid #ec776b;
    background-color: #f3a79f;
    box-shadow: #f9d0cc 0 1px 1px 0 inset;
}

    .btn_pink:hover {
        border: 1px solid #ec776b;
        border-bottom: 2px solid #ec776b;
        background-color: #ef958c;
    }

    .btn_pink:active {
        top: 1px;
        margin: 0 0 1px 0;
        position: relative;
        border: 1px solid #ec776b;
        border-bottom: 1px solid #ec776b;
        box-shadow: #fff 0 0 0 0 inset;
    }